<extend name="Public/base"/>
<block name="style">
    <style>
      .addBtn{
        width: 90px;
        height: 20px;
        line-height: 20px;
        border: 1px solid #000;
        border-radius: 5px;
        color: #000;
        background: #eee;
        padding: 5px 10px;
        text-align: center;
        margin-left: 10px;
      }
      .point {
        position: absolute;
        left: 50%;
        top: 50%;
      }
      .pop {
        width: 500px;
        height: auto;
        position: absolute;
        left: -250px;
        top: -250px;
        border: 1px solid #000;
        border-radius: 5px;
        background: #fff;
      }
      .book-top{
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: #eee;
        text-align: center;
      }
      .book-main{
        width: 100%;
        height: auto;
        padding: 1%;
      }
      .book-main .one_type, .book-main .two_type{
        width: 48.5%;
        margin-top: 5px;
        height: 40px;
      }
      .book-main .book-select{
        width: 98%;
        height: 40px;
        margin-top: 10px;
      }

      .tgb-gg{
        display: block;
        width: 100%;
        padding: 1%;
        margin: 0 auto;
      }

      .tgb-gg .tgbg-bt{
        display: block;
        width: auto;
        font-size: 14px;
        line-height: 14px;
        color: #333;
        font-weight: bold;
      }

      .tgb-gg .tgbg-box{
        display: block;
        width: 100%;
        padding-top: 1px;
      }

      .tgb-gg .tgbg-box .tgbgb-btn{
        display: block;
        width: 75px;
        height: 30px;
        background: #f5f5f5;
        border-radius: 6px;
        font-size: 12px;
        line-height: 30px;
        color: #666;
        text-align: center;
        float: left;
        margin: 10px 10px 0 0;
      }

      .tgb-gg .tgbg-box .cur{
        display: block;
        width: 73px;
        height: 28px;
        background: #fff;
        border: 1px solid #f9272a;
        line-height: 28px;
        color: #f9272a;
      }
      .clear{
        clear: both;
      }

      .book-foot{
        width: 100%;
        height: 50px;
      }
      .book-foot button{
        width: 48%;
        height: 40px;
        margin-left: 1%;
      }

      .spec_list{
        float: left;
      }

      .spec_list div{
        width: 270px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #000;
        float: left;
        text-align: center;
      }
      .delVideoBookClass{
        cursor: pointer;
      }
    </style>
</block>
<block name="body">
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <div class="main-title">
        <h2>{$meta_title}</h2>
    </div>

    <form action="" method="post" class="form-horizontal">
        <!--  课程名称  -->
        <div class="form-item">
            <label class="item-label">课程名称</label>
            <div class="controls">
                <input type="text" class="text input-large" name="name" value="{$info.name}">
            </div>
        </div>
        <!--  课程分类  -->
        <div class="form-item">
            <label class="item-label">课程分类</label>
            <div class="controls">
                <select name="one_type_id" id="one_type_id">
                    <option value="0">请选择一级分类</option>
                    <volist name="one_type_list" id="vo">
                        <option value="{$vo.id}" <if condition="$info['one_type_id'] == $vo['id']">selected</if>>{$vo.name}</option>
                    </volist>
                </select>

                <select name="two_type_id" id="two_type_id">
                    <option value="0">请选择二级分类</option>
                    <volist name="two_type_list" id="vo">
                        <option value="{$vo.id}" <if condition="$info['two_type_id'] == $vo['id']">selected</if>>{$vo.name}</option>
                    </volist>
                </select>
            </div>
        </div>

        <!--  封面图  -->
        <div class="controls">
            <label class="item-label">封面图<span class="check-tips">（推荐尺寸：240px * 160px）</span></label>
            <input type="file" id="img_file" style="display: none">
            <input type="hidden" name="img" id="img" value="{$info['img']|default=''}"/>
            <img class="upload-file" src="{$info.img|getPicture}" id="uploadImg">
            <script type="text/javascript">
                $("#uploadImg").click(function (){
                    $("#img_file").trigger("click");
                })
                $('#img_file').change(function (){
                    var pic = $(this)[0].files[0];
                    var formData = new FormData();
                    var url="{:U('File/uploadPicture',array('session_id'=>session_id()))}";
                    formData.append('download', pic);
                    $.ajax({
                        url:url,
                        type:"post",
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success:function(data){
                            if(data.status == 1){
                                //上传成功
                                var id = data.id;
                                var path = data.path;

                                $('#img').val(id);
                                $('#uploadImg').attr('src', path);
                            }else{
                                layer.msg(data.info);
                            }
                        }
                    });
                });
            </script>
        </div>

        <!--  轮播图  -->
        <div class="controls">
            <label class="item-label">轮播图<span class="check-tips">（推荐尺寸：750px * 360px）</span></label>
            <input type="file" id="imgs_file" multiple style="display: none">
            <input type="hidden" name="imgs" id="imgs" value="{$info['imgs']|default=''}"/>
            <div class="imgs_div">
                <!-- 已上传图片盒子 -->
                <volist name="imgs_arr" id="vo">
                    <div class="upload-files-div">
                        <img class="upload-files" src="{$vo.path}" />
                        <span class="upload-file-del" onclick="delThisPic(this)">删除</span>
                    </div>
                </volist>
            </div>
            <img class="upload-files" id="uploadImgs" src="/Uploads/Picture/uploadBtn.png">
            <script type="text/javascript">
                $("#uploadImgs").click(function (){
                    $("#imgs_file").trigger("click");
                })
                $('#imgs_file').change(function (){
                    var pics = $(this)[0].files;

                    for(var i = 0; i < pics.length; i++){
                        var formData = new FormData();
                        var url="{:U('File/uploadPicture',array('session_id'=>session_id()))}";
                        formData.append('download', pics[i]);
                        $.ajax({
                            url:url,
                            type:"post",
                            data: formData,
                            cache: false,
                            contentType: false,
                            processData: false,
                            success:function(data){
                                if(data.status == 1){
                                    var imgs = $('#imgs').val();

                                    //上传成功
                                    var id = data.id;
                                    var path = data.path;

                                    var img_str = '<div class="upload-files-div"><img class="upload-files" src="'+ path +'" /><span class="upload-file-del" onclick="delThisPic(this)">删除</span></div>';
                                    $('.imgs_div').append(img_str)

                                    if(imgs == ''){
                                        imgs = id;
                                    }else{
                                        imgs += ',' + id;
                                    }
                                    $('#imgs').val(imgs)
                                }
                            }
                        });
                    }
                });
                function delThisPic(that){
                    var index = $('.upload-file-del').index(that);
                    var imgs = $('#imgs').val();
                    var imgs_arr = imgs.split(',')

                    //按某个字符切割字符串成数组
                    imgs_arr.splice(index, 1);
                    //数组转换字符串
                    imgs = imgs_arr.join(',');

                    $('#imgs').val(imgs);
                    $(that).parent().remove();
                }
            </script>
        </div>

        <!--  价格  -->
        <div class="form-item">
            <label class="item-label">价格<span class="check-tips">（0代表免费）</span></label>
            <div class="controls">
                <input type="text" class="text input-large" name="price" value="{$info.price}">
            </div>
        </div>

        <!--  推荐书籍  -->
        <div class="form-item">
            <label class="item-label">推荐书籍<span class="check-tips"><span class="addBtn" onclick="$('.model').show()">添加推荐书籍</span></span></label>
            <div class="controls spec_list_block" style="display: none">
                <div class="spec_list">
                    <div>书籍名</div>
                    <div>规格</div>
                    <div>价格</div>
                    <div>操作</div>
                </div>
                <div class="clear"></div>
                <div class="info-div">

                </div>
            </div>
        </div>

        <!--  上下架  -->
        <div class="form-item">
            <label class="item-label">上下架</label>
            <div class="controls">
                <label><input type="radio" name="is_upper" value="1" checked>上架</label>
                <label><input type="radio" name="is_upper" value="0">下架</label>
            </div>
        </div>

        <!--  介绍  -->
        <div class="form-item">
            <label class="item-label">介绍</label>
            <div class="controls">
                <label class="textarea input-large" style="width: 1250px;">
                    <textarea name="desc">{$info.desc}</textarea>
                    {:hook("adminArticleEdit", array("name"=>desc,"value"=>$info["desc"]))}
                </label>
            </div>
        </div>

        <input type="hidden" value="{:I('id')}" name="id" />
        <input type="hidden" class="spec_ids" name="spec_ids" value="{$spec_ids}">
        <div class="form-item">
            <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
            <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
        </div>
    </form>

    <div class="model" style="width:100%; height:100%;left:0;top:0; position:fixed;background:rgba(0,0,0,0.1); z-index: 99;display: none">
        <div class="point">
            <div class="pop">
                <div class="book-top">
                    <h2>推荐书籍</h2>
                </div>
                <div class="book-main">
                    <select class="one_type">
                        <option value="0">请选择书籍一级分类</option>
                        <volist name="book_one_type_list" id="vo">
                            <option value="{$vo.id}">{$vo.name}</option>
                        </volist>
                    </select>
                    <select class="two_type">
                        <option value="0">请选择书籍二级分类</option>
                    </select>
                    <select class="book-select">
                        <option value="0">请选择书籍</option>
                        <volist name="goods_list" id="vo">
                            <option value="{$vo.id}">{$vo.name}</option>
                        </volist>
                    </select>
                </div>

                <div class="spec-div">
                    <!-- <div class="tgb-gg">
                        <text class="tgbg-bt">版本</text>
                        <div class="tgbg-box">
                            <div class="tgbgb-btn cur">限量版</div>
                            <div class="tgbgb-btn">标准版</div>
                            <div class="clear"></div>
                        </div>
                    </div> -->
                </div>

                <hr />
                <div class="book-foot">
                    <button onclick="closeBookModel();">取消</button>
                    <button onclick="addBook();">确认</button>
                </div>
            </div>
        </div>
    </div>
</block>

<block name="script">
    <script type="text/javascript">
        $('#one_type_id').change(function (res){
            var url = "{:U('getTwoTypeList')}";
            var one_type_id = $(this).val();

            $.post(url, {
                one_type_id: one_type_id
            }, function (res){
                var option = '<option value="0">请选择二级分类</option>';
                if(res.result == 1 && res.data.length > 0){
                    res.data.forEach(function (val){
                        option += '<option value="'+  val.id +'">'+ val.name +'</option>'
                    })
                }
                $('#two_type_id').html(option);
            },'json')
        })

        $('.one_type').change(function (res) {
            var url = "{:U('getBookTwoTypeList')}";
            var one_type = $(this).val();

            $.post(url, {
                one_type: one_type
            }, function (res) {
                var two_option = '<option value="0">请选择书籍二级分类</option>';
                var goods_option = '<option value="0">请选择书籍</option>';
                if (res.result == 1) {
                    if(res.data.two_type_list.length > 0){
                        res.data.two_type_list.forEach(function (val) {
                            two_option += '<option value="' + val.id + '">' + val.name + '</option>'
                        })
                    }
                    if(res.data.goods_list.length > 0){
                        res.data.goods_list.forEach(function (val) {
                            goods_option += '<option value="' + val.id + '">' + val.name + '</option>'
                        })
                    }
                }
                $('.two_type').html(two_option);
                $('.book-select').html(goods_option);
            }, 'json')

            $('.spec-div').html('');
            curSpec = []
        })

        $('.two_type').change(function (res) {
            var url = "{:U('getBook')}";
            var one_type = $('.one_type').val();
            var two_type = $(this).val();

            $.post(url, {
                one_type: one_type,
                two_type: two_type
            }, function (res) {
                var option = '<option value="0">请选择书籍</option>';
                if (res.result == 1 && res.data.length > 0) {
                    res.data.forEach(function (val) {
                        option += '<option value="' + val.id + '">' + val.name + '</option>'
                    })
                }
                $('.book-select').html(option);
            }, 'json')
            $('.spec-div').html('');
            curSpec = []
        })

        var goods_list = {$goods_list_json};
        var choose_spec_list;
        $('.book-select').change(function (res){
            var id = $(this).val();
            if(id > 0){
                if(goods_list.length > 0){
                    var spec_list;
                    for(var i = 0; i < goods_list.length; i++){
                        if(goods_list[i].id == id){
                            spec_list = JSON.parse(goods_list[i].spec);
                            break;
                        }
                    }

                    choose_spec_list = spec_list;
                    curSpec = [];
                    readerSpecDiv(spec_list);
                }
            }else{
                $('.spec-div').html('')
                curSpec = []
            }
        })

        var curSpec = [];
        function chooseSpec(that, out_index, in_index)
        {
            if (curSpec.length == 0) {
                for (var i = 0; i < choose_spec_list.length; i++) {
                    curSpec[i] = [];
                }
            }
            curSpec[out_index] = [out_index, in_index];

            readerSpecDiv(choose_spec_list, curSpec)
        }

        function readerSpecDiv(spec_list, curSpec = [])
        {
            if(spec_list.length > 0){
                var spec_div = '';
                for(var j = 0; j < spec_list.length; j++){
                    var value = '';
                    for(var v = 0; v < spec_list[j].spec.length; v++){
                        var cur = '';
                        if(curSpec.length > 0){
                            for(var c = 0; c < curSpec.length; c++){
                                if(j == curSpec[c][0] && v == curSpec[c][1]){
                                    cur = 'cur';
                                    break;
                                }
                            }
                        }
                        value += '<div class="tgbgb-btn '+ cur +'" onclick="chooseSpec(this, '+ j +', '+ v +')">'+ spec_list[j].spec[v] +'</div>';
                    }
                    spec_div += '<div class="tgb-gg">\n' +
                        '                            <text class="tgbg-bt">'+ spec_list[j].name +'</text>\n' +
                        '                            <div class="tgbg-box">\n' +
                        '                                '+ value +'' +
                        '                                <div class="clear"></div>\n' +
                        '                            </div>\n' +
                        '                        </div>';
                }
            }
            $('.spec-div').html(spec_div)
        }

        function closeBookModel()
        {
            $('.model').hide();
            curSpec = [];
            $('.spec-div').html('');
            $('.one_type').val(0)
            $('.two_type').val(0)
            $('.book-select').val(0)
        }

        var spec_ids = '{$spec_ids}';
        var spec_show_list = {$spec_show_list} ? {$spec_show_list} : [];
        if(spec_show_list && spec_ids){
            readerSpecList();
            $('.spec_list_block').show();
        }
        function addBook()
        {
            var goods_id = $('.book-select').val();
            if(goods_id == 0){
                layer.msg('请选择书籍');
                return;
            }

            if(curSpec.length > 0){
                var is_empty = false;
                for(var i = 0; i < curSpec.length; i++){
                    if(curSpec[i].length == 0){
                        is_empty = true;
                        break;
                    }
                }
                if(is_empty){
                    layer.msg('请选择完整规格');
                    return;
                }
            }else{
                layer.msg('请选择规格');
                return;
            }


            if(choose_spec_list.length > 0){
                var choose_spec_str = '';
                for(var i = 0; i < choose_spec_list.length; i++){
                    if(choose_spec_str == ''){
                        choose_spec_str = '"'+ choose_spec_list[i].spec[curSpec[i][1]] +'"';
                    }else{
                        choose_spec_str += ',"'+ choose_spec_list[i].spec[curSpec[i][1]] +'"';
                    }
                }
            }

            choose_spec_str = '['+ choose_spec_str +']';

            var url = "{:U('getSpecInfo')}";

            $.post(url, {
                goods_id: goods_id,
                spec: choose_spec_str
            }, function (res){
                if(res.result == 1){
                    var is_have = false;
                    if(spec_show_list.length > 0){
                        for(var i = 0; i < spec_show_list.length; i++){
                            if(spec_show_list[i].id == res.data.id){
                                is_have = true;
                                break;
                            }
                        }
                    }

                    if(is_have){
                        layer.msg('该规格商品已存在，请重新选择');
                        return;
                    }else{
                        if(spec_ids == ''){
                            spec_ids = res.data.id;
                        }else{
                            spec_ids += ',' + res.data.id;
                        }
                        spec_show_list.push(res.data)

                        $('.spec_ids').val(spec_ids);

                        readerSpecList();
                        $('.spec_list_block').show();
                        closeBookModel();
                    }
                }else{
                    layer.msg(res.msg)
                }
            },'json')
        }

        function readerSpecList()
        {
            if(spec_show_list.length > 0){
                var spec_list_div = '';
                for (var i = 0; i < spec_show_list.length; i++) {
                    spec_list_div += '<div class="spec_list">\n' +
                        '                    <div>'+ spec_show_list[i].goods_name +'</div>\n' +
                        '                    <div>'+ spec_show_list[i].spec +'</div>\n' +
                        '                    <div>'+ spec_show_list[i].price +'</div>\n' +
                        '                    <div><span class="delVideoBookClass" onclick="delVideoBook(this)">删除</span></div>\n' +
                        '                </div>\n' +
                        '                <div class="clear"></div>';
                }
                $('.info-div').html(spec_list_div);
            }else{
                $('.info-div').html('');
            }
        }

        function delVideoBook(that){
            var index = $('.delVideoBookClass').index(that);

            spec_show_list.splice(index, 1);

            var new_spec_ids = '';
            if(spec_show_list.length > 0){
                for(var i = 0; i < spec_show_list.length; i++){
                    if(new_spec_ids == ''){
                        new_spec_ids = spec_show_list[i].id;
                    }else{
                        new_spec_ids += ',' + spec_show_list[i].id;
                    }
                }
                spec_ids = new_spec_ids
            }else{
                spec_ids = '';
            }

            $('.spec_ids').val(spec_ids);
            readerSpecList();
        }

        //导航高亮
        highlight_subnav('{:U("Manage/videoList")}');
    </script>
</block>